<script setup lang="ts">
import { computed, defineEmits, defineProps, toRefs } from 'vue';

import { ElDialog } from 'element-plus';

import {
  folderIcon,
  geojsonIcon,
  otherIcon,
  pdfIcon,
  shpIcon,
  tableIcon,
  tupianIcon,
  zipIcon,
} from './assets';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  fileData: {
    // eslint-disable-next-line vue/require-valid-default-prop
    default: {},
    type: Object,
  },
});

const emit = defineEmits(['update:visible']);
// 关闭弹窗时通知父组件
const onClose = () => {
  emit('update:visible', false);
};
const { visible, fileData } = toRefs(props);
// 计算文件图标
const imageSrc = computed(() => {
  switch (props.fileData?.type) {
    case 'csv':
    case 'xls':
    case 'xlsx': {
      return tableIcon;
    }
    case 'folder': {
      return folderIcon;
    }
    case 'geojson': {
      return geojsonIcon;
    }
    case 'gif':
    case 'jpg':
    case 'png': {
      return tupianIcon;
    }
    case 'pdf': {
      return pdfIcon;
    }
    case 'shp': {
      return shpIcon;
    }
    case 'zip': {
      return zipIcon;
    }
    default: {
      return otherIcon;
    }
  }
});
</script>

<template>
  <ElDialog
    v-model="visible"
    title="详情信息"
    width="400px"
    :before-close="onClose"
  >
    <div class="p-4">
      <div class="flex flex-col items-center gap-2">
        <img :src="imageSrc" alt="File" class="h-16 w-16" />
        <p class="text-sm text-gray-600">{{ fileData?.name || '未知文件' }}</p>
      </div>
      <div class="mt-4 space-y-2 border-t pt-3 text-sm text-gray-700">
        <p>
          <span class="font-semibold">大小：</span>
          {{
            fileData?.size ? `${Math.ceil(fileData.size / 1024)} KB` : '未知'
          }}
        </p>
        <p>
          <span class="font-semibold">类型：</span>
          {{ fileData?.type || '未知' }}
        </p>
        <p>
          <span class="font-semibold">创建时间：</span>
          {{ fileData?.createdTime || '未知' }}
        </p>
        <p>
          <span class="font-semibold">修改时间：</span>
          {{ fileData?.updatedTime || '未知' }}
        </p>
        <p>
          <span class="font-semibold">拥有者：</span>
          {{ fileData?.ownerCount || '未知' }}
        </p>
        <p>
          <span class="font-semibold">发布次数：</span>
          {{ fileData?.publishCount || '未知' }}
        </p>
        <p>
          <span class="font-semibold">下载次数：</span>
          {{ fileData?.downloadCount || '未知' }}
        </p>
        <p>
          <span class="font-semibold">预览次数：</span>
          {{ fileData?.previewCount || '未知' }}
        </p>
      </div>
    </div>
  </ElDialog>
</template>
